<template>
  <div class="flex">
    <div class="left" v-if="flag">
      <el-tree
        :data="commoditycategory.results"
        :props="{
          children: 'children',
          label: 'name',
        }"
        @node-click="changeNodeCid"
      ></el-tree>
    </div>
    <div class="flex-1 relative">
      <el-collapse accordion>
        <el-collapse-item>
          <template #title>
            <el-button @click.native.stop @click.native="flag = !flag">
              <i class="el-icon-s-management"></i>
            </el-button>
            <el-button style="margin-left: 10px">
              <i class="el-icon-search"></i>
            </el-button>

            <div class="block justify-between items-center w-full">
              <el-button-group> </el-button-group>
              <div class="tag">
                <el-tag
                  v-for="tag in tagList"
                  :key="tag.key"
                  closable
                  :type="tag.type"
                  :disable-transitions="false"
                  @close="onClose(tag)"
                >
                  {{ tag.name }}
                </el-tag>
              </div>

              <el-pagination
                @click.native.stop
                @size-change="pagination.size = $event"
                @current-change="pagination.page = $event"
                :current-page="pagination.page"
                :page-sizes="[20, 40, 80, 100]"
                :page-size="pagination.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </template>
          <div>
            <product-list-form v-bind.sync="searchList"></product-list-form>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div class="dong">
        <el-table :data="productlist" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="180">
          </el-table-column>
          <el-table-column prop="short_desc" label="商品描述">
          </el-table-column>
          <el-table-column prop="display_image" label="商品展示图片">
            <template v-slot="{ row }">
              <el-image
                :src="row.images[0] === undefined ? '' : row.images[0].image"
                style="width: 60px; height: 60px"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="images" label="商品图片">
            <template v-slot="{ row }">
              <img :src="row.display_image" />
            </template>
          </el-table-column>
          <el-table-column prop="price" label="商品原价"> </el-table-column>
          <el-table-column prop="sale_price" label="商品售价">
          </el-table-column>
          <el-table-column prop="stock" label="商品库存"> </el-table-column>
          <el-table-column label="所属类别" :formatter="formattype">
          </el-table-column>
          <el-table-column prop="stock" label="是否上架">
            <template v-slot="slot">
              <el-switch
                v-model="slot.row.is_published"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="created" label="创建时间">
            <template slot-scope="scope">
              <!-- addtime 是接口的字段 -->
              <!-- | 管道符 -->
              <!-- 设置全局过滤器 名为dateChage -->
              {{ scope.row.created | dateChage }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-link type="primary" class="el-icon-edit" @click="edit(row)"
                >编辑</el-link
              >
              <el-link type="danger" class="el-icon-delete" @click="Delete(row)"
                >删除</el-link
              >
              <el-link type="warning" class="el-icon-view">详细预览</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="新建商品分类" :visible.sync="visible">
      <EditProduct
        @edit="edit"
        :editRow="editRow"
        :visible="visible"
        @return-active="update"
      />
    </el-dialog>
  </div>
</template>
<script>
import { productlist } from "@/api/index";
import EditProduct from "@/views/product/list/EditProduct.vue";
import { mapActions, mapGetters, mapState } from "vuex";
import ProductListForm from "@/views/product/list/ProductListForm.vue";
export default {
  components: { ProductListForm, EditProduct },
  name: "ProductList",
  computed: {
    ...mapGetters("category", ["productCategoryMap"]),
    ...mapState("category", ["commoditycategory"]),
    ...mapState("categoryall", ["all"]),
    tagList() {
      let arr = [];

      let obj = {
        minPrice: "最小价格:",
        maxPrice: "最大价格",
        beginTime: "起始时间",
        endTime: "结束时间",
        key: "关键字",
      };
      for (let key in this.params) {
        if (key == "page" || key == "size") {
          continue;
        }

        if (key == "cid") {
          arr.push({
            name: "商品类别:" + this.productCategoryMap[this.params[key]].name,
            type: "",
            key: key,
          });
          continue;
        }
        if (this.params[key]) {
          arr.push({
            name: obj[key] + ":" + this.params[key],
            type: "",
            key: key,
          });
        }
      }
      return arr;
    },
    params() {
      let obj = {};
      obj = {
        ...this.pagination,
        ...this.searchList,
        key: this.searchList.ikey,
      };
      if (this.cid != -1) {
        obj["cid"] = this.cid;
      }
      delete obj.ikey;
      return obj;
    },
  },
  data() {
    return {
      visible: false,
      flag: true,
      pagination: {
        page: 1,
        size: 20,
      },
      productlist: [],
      total: 0,
      //查询
      cid: -1,
      searchList: {
        ikey: "",
        minPrice: 0,
        maxPrice: 0,
        beginTime: "",
        endTime: "",
      },
      editRow: {},
      // tagList: [],
    };
  },
  methods: {
    formattype(row) {
      const path = [];
      const getpath = (id, data) => {
        const re = data.find((item) => {
          return item.id === id;
        });
        if (!re) return "";
        path.unshift(re.name);
        //出口
        if (!re.parent) return path;
        //递归
        return getpath(re.parent, data);
      };

      const res = getpath(row.category, this.all);

      return res.join("/");
    },

    Delete(row) {
      this.$confirm("确定删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = await this.delete(row);
          if (data) {
            //当用户点击确定时触发
            this.$message({
              type: "success",
              message: "删除成功",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    update(obj) {
      Object.assign(this.editRow, obj);
      console.log(obj);
    },
    async edit(data) {
      this.visible = true;
      this.editRow = data;
    },
    async _getProductList() {
      let {
        data: { results, count },
      } = await productlist(this.params);
      this.productlist = results;
      this.total = count;
    },
    ...mapActions("category", ["getCategory", "delete"]),
    ...mapActions("categoryall", ["getAll"]),
    changeNodeCid(data) {
      if (data.leaf) {
        // 判断是否为叶子节点
        this.cid = data.id;
      }
    },
    onClose(tag) {
      if (tag.key == "cid") {
        this.cid = -1;
      }
      if (tag.key == "key") {
        this.$set(this.searchList, "ikey", "");
      }
      if (tag.key == "minPrice" || tag.key == "maxPrice") {
        this.$set(this.searchList, tag.key, 0);
      }
      if (tag.key == "beginTime" || tag.key == "endTime") {
        this.$set(this.searchList, tag.key, "");
      }
    },
  },
  created() {
    this.getCategory();
    this.getAll();
    this._getProductList();
    this.$watch("params", this._getProductList, { deep: true });
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.el-table tr {
  height: 120px;
}
.el-table_1_column_5 .el-table__cell {
  width: 200px;
}
.el-table__body {
  position: absolute;
  width: 100%;
}
.dong {
  position: absolute;
  width: 100%;
}
.left {
  // height: 230px;
}
.flex {
  overflow: scroll;
  height: 550px;
}
.el-form-item {
  margin-bottom: 22px;
}
// ::-webkit-scrollbar {
//   width: 4px;
//   height: 3px;
// }
// ::-webkit-scrollbar-track {
//   border-radius: 3px; /*滚动条的背景区域的圆角*/
// }
// ::-webkit-scrollbar-thumb {
//   border-radius: 3px; /*滚动条的圆角*/
//   background-color: #ccc; /*滚动条的背景颜色*/
// }

// ::-webkit-scrollbar-thumb:hover {
//   background-color: #bbb;
// }

// ::-webkit-scrollbar-thumb:active {
//   cursor: pointer;
// }
</style>
